<template>
  <view>
    <!-- 顶部搜索框组件导入使用 -->
    <Search />
    <!-- 轮播图 -->
    <swiper
      class="swiper"
      indicator-dots
      autoplay
      circular
      indicator-color="#fff"
      indicator-active-color="#EA4350"
    >
      <swiper-item v-for="item in swiperData" :key="item.goods_id">
        <image class="swiper_img" :src="item.image_src" mode="aspectFill" />
      </swiper-item>
    </swiper>

    <!-- 导航栏 -->
    <view class="nav">
      <navigator
        class="nav_item"
        v-for="item in navData"
        :key="item.name"
        :url="item.navigator_url"
        :open-type="item.open_type"
      >
        <image class="nav_img" :src="item.image_src" mode="aspectFill" />
      </navigator>
    </view>

    <!-- 楼层 -->
    <view v-for="(item, index) in floorData" :key="index" class="floor">
      <!-- 楼层标题 -->
      <view class="floor_title">
        <image
          class="floor_title_img"
          :src="item.floor_title.image_src"
          mode="aspectFill"
        />
      </view>
      <view class="floor_list">
        <navigator
		class="floor_list_item"
          v-for="item2 in item.product_list"
          :key="item2.name"
          :open-type="item2.open_type"
          :url="item2.navigator_url"
        >
          <image 
		  class="floor_list_image"
		  :src="item2.image_src" 
		  mode="aspectFill" 
		  :style="'width:'+item2.image_width+'rpx'"
		  />
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
import Search from "@/components/Search/index";
import { homeCatitems, homeFloordata, homeSwiper } from "@/api/index.js"
export default {
  components: {
    Search,
  },
  data() {
    return {
      swiperData: [],
      navData: [],
      floorData: [],
    };
  },
  async onLoad() {
    // 获取轮播图
    const res = await homeSwiper();
    this.swiperData = res.data.message;
    
    // 获取导航
    const res2 = await homeCatitems();
    this.navData = res2.data.message;

    // 获取楼层
    const res3 = await homeFloordata();
    // 因为后端传递过来的Url与我们的项目有差别所以要做一些调整
    res3.data.message.forEach((item) => {
			item.product_list.forEach((item2) => {
				item2.navigator_url = item2.navigator_url.replace('?','/main?')
			})
		})
    this.floorData = res3.data.message;

  },
  methods: {},
};
</script>

<style lang="less" scoped>
.swiper {
  width: 750rpx;
  height: 340rpx;
  .swiper_img {
    width: 750rpx;
    height: 340rpx;
  }
}

.nav {
  display: flex;
  justify-content: space-evenly;
  padding: 12rpx 0 43rpx;
  .nav_item {
    .nav_img {
      width: 128rpx;
      height: 140rpx;
    }
  }
}

.floor {
  .floor_title {
    .floor_title_img {
      width: 750rpx;
      height: 60rpx;
    }
  }

  .floor_list {
	  overflow: hidden;
	  margin-top: 10rpx;
	  .floor_list_item{
		  float: left;
		  margin-left: 15rpx;
		  margin-bottom: 10rpx;
		  .floor_list_image{
			  height: 188rpx;
				vertical-align: top;
		  }
		  &:nth-child(1){
			  .floor_list_image{
				  height: 386rpx;
			  }
		  }
	  }
  }
}
</style>